<template>
  <view class="container">
    <swiper class="swiper" indicator-dots :autoplay="autoplay" vertical :interval="interval"  :current="current" duration="500"  @change="onSwiperChange">
	<!-- 第一页 -->
	<swiper-item class="swiper1">
		<img src="@/static/images/yindao/1/wenzi.png" class="swiper1_2025" alt="">
		<img src="@/static/images/yindao/1/long.png" class="swiper1_long" alt="">
		<view class="yuanman">
			圆满完成“四零”保障目标
		</view>
		<view class="pageBomtitle">
			湖北移动网络人守护网络安全运行
		</view>
		<view class="dayView">
			<view class="dayView_bg">
				{{formattedNumber}}
			</view>天
		</view>
	</swiper-item>
	<!-- 第二页 -->
	<swiper-item class="swiper2">
	    <img src="@/static/images/yindao/2/title2-1.png" class="swiper2_titlebg" alt="">
	    <img src="@/static/images/yindao/2/title2-2.png" class="swiper2_titlebg2" alt="">
	      <img src="@/static/images/yindao/2/hot.gif" class="swiper2_hot" alt="" v-if="myxgData.f_sjmryhsrj > 894">
		<view class="sjmr_num" :class="{ animateTextBg: current === 1}">
			<view class="sjmr_num_nr">
				省际漫入用户数日均 <span class="shuju">{{myxgData.f_sjmryhsrj}}万</span>
			</view>
			<view class="sjmr_num_nr">
				 较日常{{myxgData.f_sjmryhsjrc > 0 ? '增长' : '降低'}}<span class="shuju">{{(myxgData.f_sjmryhsjrc).replace(/[-]/g, '') + '%'}}</span>
				 同比{{myxgData.f_sjmryhstb > 0 ? '增长' : '降低'}}<span class="shuju">{{(myxgData.f_sjmryhstb).replace(/[-]/g, '') + '%'}}</span>
			</view>
			<view class="sjmr_num_nr">
				省际漫入用户数高峰出现在<span class="shuju">{{ydywData.f_sjmryhsrq}}</span>达到 <span class="shuju">{{ydywData.f_sjmryhsfz}}万</span>
			</view>
		</view>
		<view class="swiper2_dt">
			<!-- moveDown -->
			<view class="biaodianView" :class="{ ditu1: current === 1 }">
				<img src="@/static/images/yindao/2/pic5.png" class="swiper2_biaodian1"  alt="">
				<br>
				<span class="biaodianName">
					{{myxgData.f_sjmrdymsf}}
				</span>
			</view>
			<view class="biaodianView" :class="{ ditu2: current === 1 }">
				<img src="@/static/images/yindao/2/pic5.png" class="swiper2_biaodian2"  alt="">
				<br>
				<span class="biaodianName">
					{{myxgData.f_sjmrdemsf}}
				</span>
			</view>
			<view class="biaodianView" :class="{ ditu3: current === 1 }">
				<img src="@/static/images/yindao/2/pic5.png" class="swiper2_biaodian3"  alt="">
				<br>
				<span class="biaodianName">
					{{myxgData.f_sjmrdsmsf}}
				</span>
			</view>
		</view>
		<view class="top3Title" :class="{ paihang1: current === 1 }">
			省际漫入用户来源地TOP3
		</view>
		<view class="top3View">
			<view class="top3ViewItem" style="margin-top: 0;" :class="{ paihang1: current === 1 }">
				<img src="@/static/images/yindao/2/paihang1.png" class="top3ViewItemImg" alt="">
				<span class="top3ViewItemName">
					{{myxgData.f_sjmrdymsf}}
				</span>
				<span class="top3ViewItemNum">
					{{myxgData.f_sjmrdymyhs}}万
				</span>
			</view>
			<view class="top3ViewItem" :class="{ paihang2: current === 1 }">
				<img src="@/static/images/yindao/2/paihang2.png" class="top3ViewItemImg" alt="">
				<span class="top3ViewItemName">
					{{myxgData.f_sjmrdemsf}}
				</span>
				<span class="top3ViewItemNum">
					{{myxgData.f_sjmrdemyhs}}万
				</span>
			</view>
			<view class="top3ViewItem" :class="{ paihang3: current === 1 }">
				<img src="@/static/images/yindao/2/paihang3.png" class="top3ViewItemImg" alt="">
				<span class="top3ViewItemName">
					{{myxgData.f_sjmrdsmsf}}
				</span>
				<span class="top3ViewItemNum">
					{{myxgData.f_sjmrdsmyhs}}万
				</span>
			</view>
		</view>
	</swiper-item>
	<!-- 第三页 -->
	<swiper-item class="swiper3">
	      <img src="@/static/images/yindao/2/title2-1.png" class="swiper2_titlebg" alt="">
	      <img src="@/static/images/yindao/2/title2-2.png" class="swiper2_titlebg2" alt="">
	      <img src="@/static/images/yindao/2/hot.gif" class="swiper2_hot" alt="" v-if="myxgData.f_gjjgatdqmryhsrj > 12.6">
		
		<view class="sjmr_num" :class="{ animateTextBg: current === 2}">
			<view class="sjmr_num_nr">
				国际及港澳台漫入用户数日均 <span class="shuju">{{myxgData.f_gjjgatdqmryhsrj}}万</span>
			</view>
			<view class="sjmr_num_nr">
				 较日常{{myxgData.f_gjjgatdqmryhsjrc > 0 ? '增长' : '降低'}}<span class="shuju">{{(myxgData.f_gjjgatdqmryhsjrc).replace(/[-]/g, '') + '%'}}</span>
				 同比{{myxgData.f_gjjgatdqmryhstb > 0 ? '增长' : '降低'}}<span class="shuju">{{(myxgData.f_gjjgatdqmryhstb).replace(/[-]/g, '') + '%'}}</span>
			</view>
			<view class="sjmr_num_nr">
				国际及港澳台漫入用户数高峰出现在<span class="shuju">{{ydywData.f_sjmcyhsrq}}</span>达到<span class="shuju">14.1万</span>
			</view>
		</view>
	  	<view class="swiper2_dt">
			<view class="biaodianView" :class="{ ditu4: current === 2 }">
				<img src="@/static/images/yindao/2/pic5.png" class="swiper2_biaodian1"  alt="">
				<br>
				<span class="biaodianName">
					{{myxgData.f_gjjgatdqmrdymgj}}
				</span>
			</view>
			<view class="biaodianView" :class="{ ditu5: current === 2 }">
				<img src="@/static/images/yindao/2/pic5.png" class="swiper2_biaodian2"  alt="">
				<br>
				<span class="biaodianName">
					{{myxgData.f_gjjgatdqmrdemgj}}
				</span>
			</view>
			<view class="biaodianView" :class="{ ditu6: current === 2 }">
				<img src="@/static/images/yindao/2/pic5.png" class="swiper2_biaodian3"  alt="">
				<br>
				<span class="biaodianName">
					{{myxgData.f_gjjgatdqmrdsmgj}}
				</span>
			</view>
	  	</view>
	  	<view class="top3Title" :class="{ paihang1: current === 2 }">
	  		国际及港澳台漫入用户来源地TOP3
	  	</view>
	  	<view class="top3View">
	  		<view class="top3ViewItem" style="margin-top: 0;" :class="{ paihang1: current === 2 }">
	  			<img src="@/static/images/yindao/2/paihang1.png" class="top3ViewItemImg" alt="">
	  			<span class="top3ViewItemName">
	  				{{myxgData.f_gjjgatdqmrdymgj}}
	  			</span>
	  			<span class="top3ViewItemNum">
	  				{{myxgData.f_gjjgatdqmrdymyhs}}万
	  			</span>
	  		</view>
			<view class="top3ViewItem" :class="{ paihang2: current === 2 }">
				<img src="@/static/images/yindao/2/paihang2.png" class="top3ViewItemImg" alt="">
				<span class="top3ViewItemName">
					{{myxgData.f_gjjgatdqmrdemgj}}
				</span>
				<span class="top3ViewItemNum">
					{{myxgData.f_gjjgatdqmrdemyhs}}万
				</span>
			</view>
			<view class="top3ViewItem" :class="{ paihang3: current === 2 }">
				<img src="@/static/images/yindao/2/paihang3.png" class="top3ViewItemImg" alt="">
				<span class="top3ViewItemName">
					{{myxgData.f_gjjgatdqmrdsmgj}}
				</span>
				<span class="top3ViewItemNum">
					{{myxgData.f_gjjgatdqmrdsmyhs}}万
				</span>
			</view>
	  	</view>
	</swiper-item>
	<!-- 第四页 -->
	<swiper-item class="swiper4">
			<img src="@/static/images/yindao/3/title3-1.png" class="swiper4_titlebg" alt="">
			<img src="@/static/images/yindao/3/title3-2.png" class="swiper4_titlebg2" alt="">
			<img src="@/static/images/yindao/3/wifi.gif" class="swiper4_wifi" alt="">
			<img src="@/static/images/yindao/3/foot1.png" class="swiper4_foot" alt="">
			<view class="sjmr_num" >
				<view class="sjmr_num_nr" :class="{ zuimei1: current === 3 }">
					春节保障共涉及高铁、高速、景区等<span class="shuju">五大</span>类保障场景 
				</view>
				<view class="sjmr_num_nr" :class="{ zuimei1: current === 3 }">
					 共计<span class="shuju">{{zbData.f_zbjzs}}</span>个基站
				</view>
				<view class="sjmr_num_nr" :class="{ zuimei2: current === 3 }">
					春节期间共完成<span class="shuju">{{zbData.f_zdjs}}</span>个站点建设
				</view>
				<view class="sjmr_num_nr" :class="{ zuimei2: current === 3 }">
					<span class="shuju">{{zbData.f_zbxqkr}}</span>个小区扩容
				</view>
				<view class="sjmr_num_nr" :class="{ zuimei2: current === 3 }">
					<span class="shuju">{{zbData.f_zbyhzg}}</span>个隐患点整改
				</view>
				<view class="sjmr_num_nr" :class="{ zuimei2: current === 3 }">
					自动负荷均衡<span class="shuju">{{zbData.f_zbzdfzjh}}</span>万次
				</view>
				<view class="sjmr_num_nr" :class="{ zuimei2: current === 3 }">
					重保区域各项网络指标正常，业务感知良好。
				</view>
			</view>
			<view class="sjmr_num" style="position: relative;" :class="{ zuimei2: current === 3 }">
				<view class="sjmr_num_nr" >
					高铁、高速4/5G流量明显<span class="shuju">上涨</span>，涨幅超<span class="shuju">50%</span>农村4/5G流量<span class="shuju">暴增</span>,5G流量较日常增长<span class="shuju">223.7%</span>，4G流量较日常增长<span class="shuju">158.7%</span>。
				</view>
				<view class="sjmr_num_nr" >
					热门高铁TOP1：<span class="shuju">京广高铁武汉段</span>
				</view>
				<view class="sjmr_num_nr" >
					热门高速TOP1：<span class="shuju">沪渝高速恩施段</span>
				</view>
				<view class="sjmr_num_nr" >
					热门景区TOP1：<span class="shuju">汉口江滩</span>
				</view>
				<view class="sjmr_num_nr" >
					热门交通枢纽TOP1：<span class="shuju">天河机场</span>
				</view>
				<view class="sjmr_num_nr" >
					高人气行政村TOP1：<span class="shuju">长阳县榔坪镇长丰村</span>
				</view>
			</view>
			<!-- <view class="zgydView" style="bottom: 200rpx;"> -->
			
				
				
				
				
				
				
				<!-- <img src="@/static/images/yindao/3/zhuanpan.png" class="zgydViewBg" alt=""> -->
			<!-- 	<view class="main"></view>
				<img src="@/static/images/yindao/3/1.png" class="zgydView1" alt="">
				<img src="@/static/images/yindao/3/2.png" class="zgydView2" alt="">
				<img src="@/static/images/yindao/3/3.png" class="zgydView3" alt="">
				<img src="@/static/images/yindao/3/4.png" class="zgydView4" alt="">
				<img src="@/static/images/yindao/3/5.png" class="zgydView5" alt=""> -->
			<!-- </view> -->
	</swiper-item>
	<!-- 第五页 -->
	<!-- <swiper-item class="swiper5">
			<img src="@/static/images/yindao/3/title3-1.png" class="swiper4_titlebg" alt="">
			<img src="@/static/images/yindao/3/title3-2.png" class="swiper4_titlebg2" alt="">
			<img src="@/static/images/yindao/3/wifi.gif" class="swiper4_wifi" alt="">
			<view class="zgydViewS" :class="{ animateTextBg: current === 4}" >
				<img src="@/static/images/yindao/3/gaotie.png" class="gaotieText" alt="">
				<view class="sjmr_num" style="margin-top: 30rpx;">
					<view class="sjmr_num_nr">
						5G用户上行体验速率<span class="shuju">{{zbData.f_gt5gyhsxtysl}}Mbps</span>
					</view>
					<view class="sjmr_num_nr">
						 5G用户下行体验速率<span class="shuju">{{zbData.f_gt5gyhxxtysl}}Mbps</span>
					</view>
					<view class="sjmr_num_nr">
						5G无线接通率<span class="shuju">{{zbData.f_gt5gwxjtl}}%</span>
					</view>
				</view>
			</view>
			<view class="top3View" style="bottom: 25%;">
				<view class="top3View_topTitle" :class="{ paihang4: current === 4 }">
					热门高铁TOP3
				</view>
				<view class="top3ViewItem" style="margin-top: 0;" :class="{ paihang4: current === 4 }">
					<img src="@/static/images/yindao/2/paihang1.png" class="top3ViewItemImg" alt="">
					<span class="top3ViewItemNum">
						{{zbData.f_rmgtd1}}
					</span>
				</view>
				<view class="top3ViewItem" :class="{ paihang5: current === 4 }">
					<img src="@/static/images/yindao/2/paihang2.png" class="top3ViewItemImg" alt="">
					<span class="top3ViewItemNum">
						{{zbData.f_rmgtd2}}
					</span>
				</view>
				<view class="top3ViewItem" :class="{ paihang6: current === 4 }">
					<img src="@/static/images/yindao/2/paihang3.png" class="top3ViewItemImg" alt="">
					<span class="top3ViewItemNum">
						{{zbData.f_rmgtd3}}
					</span>
				</view>
			</view>
			<img src="@/static/images/yindao/3/foot2.png" class="swiper4_foot" alt="">
			<img src="@/static/images/yindao/3/katongnan.png" class="katongnan"  :class="{ animateRen: current === 4}" alt="">
			
	</swiper-item> -->
	<!-- 第六页 -->
	<!-- <swiper-item class="swiper6">
			<img src="@/static/images/yindao/3/title3-1.png" class="swiper4_titlebg" alt="">
			<img src="@/static/images/yindao/3/title3-2.png" class="swiper4_titlebg2" alt="">
			<img src="@/static/images/yindao/3/wifi.gif" class="swiper4_wifi" alt="">
			<view class="zgydViewS"  :class="{ animateTextBg: current === 5}">
				<img src="@/static/images/yindao/3/gaoshu.png" class="gaotieText" alt="">
				<view class="sjmr_num" style="margin-top: 30rpx;">
					<view class="sjmr_num_nr">
						5G用户上行体验速率<span class="shuju">{{zbData.f_gs5gyhsxtysl}}Mbps</span>
					</view>
					<view class="sjmr_num_nr">
						 5G用户下行体验速率<span class="shuju">{{zbData.f_gs5gyhxxtysl}}Mbps</span>
					</view>
					<view class="sjmr_num_nr">
						5G无线接通率<span class="shuju">{{zbData.f_gs5gwxjtl}}%</span>
					</view>
				</view>
			</view>
			<view class="top3View" style="bottom: 25%;left: 18%;">
				<view class="top3View_topTitle" :class="{ paihang4: current === 5 }">
					热门高速TOP3
				</view>
				<view class="top3ViewItem" style="margin-top: 0;" :class="{ paihang4: current === 5 }">
					<img src="@/static/images/yindao/2/paihang1.png" class="top3ViewItemImg" alt="">
					<span class="top3ViewItemNum">
						{{zbData.f_rmgsd1}}
					</span>
				</view>
				<view class="top3ViewItem" :class="{ paihang5: current === 5 }">
					<img src="@/static/images/yindao/2/paihang2.png" class="top3ViewItemImg" alt="">
					<span class="top3ViewItemNum">
						{{zbData.f_rmgsd2}}
					</span>
				</view>
				<view class="top3ViewItem" :class="{ paihang6: current === 5 }">
					<img src="@/static/images/yindao/2/paihang3.png" class="top3ViewItemImg" alt="">
					<span class="top3ViewItemNum">
						{{zbData.f_rmgsd3}}
					</span>
				</view>
			</view>
			<img src="@/static/images/yindao/3/foot3.png" class="swiper4_foot" alt="">
			<img src="@/static/images/yindao/3/katong.png" class="katong" :class="{ animateRen: current === 5}"  alt="">
			
	</swiper-item> -->
	<!-- 第七页 -->
	<!-- <swiper-item class="swiper5">
			<img src="@/static/images/yindao/3/title3-1.png" class="swiper4_titlebg" alt="">
			<img src="@/static/images/yindao/3/title3-2.png" class="swiper4_titlebg2" alt="">
			<img src="@/static/images/yindao/3/wifi.gif" class="swiper4_wifi" alt="">
			<view class="zgydViewS"  :class="{ animateTextBg: current === 6}">
				<img src="@/static/images/yindao/3/jingqu.png" class="gaotieText" alt="">
				<view class="sjmr_num" style="margin-top: 30rpx;">
					<view class="sjmr_num_nr">
						5G用户上行体验速率<span class="shuju">{{zbData.f_jq5gyhsxtysl}}Mbps</span>
					</view>
					<view class="sjmr_num_nr">
						 5G用户下行体验速率<span class="shuju">{{zbData.f_jq5gyhxxtysl}}Mbps</span>
					</view>
					<view class="sjmr_num_nr">
						5G无线接通率<span class="shuju">{{zbData.f_jq5gwxjtl}}%</span>
					</view>
				</view>
			</view>
			<view class="top3View" style="bottom: 25%;">
				<view class="top3View_topTitle" :class="{ paihang4: current === 6 }">
					热门景区TOP3
				</view>
				<view class="top3ViewItem" style="margin-top: 0;" :class="{ paihang4: current === 6 }">
					<img src="@/static/images/yindao/2/paihang1.png" class="top3ViewItemImg" alt="">
					<span class="top3ViewItemNum">
						{{zbData.f_rmjqd1}}
					</span>
				</view>
				<view class="top3ViewItem"  :class="{ paihang5: current === 6 }">
					<img src="@/static/images/yindao/2/paihang2.png" class="top3ViewItemImg" alt="">
					<span class="top3ViewItemNum">
						{{zbData.f_rmjqd2}}
					</span>
				</view>
				<view class="top3ViewItem" :class="{ paihang6: current === 6 }">
					<img src="@/static/images/yindao/2/paihang3.png" class="top3ViewItemImg" alt="">
					<span class="top3ViewItemNum">
						{{zbData.f_rmjqd3}}
					</span>
				</view>
			</view>
			<img src="@/static/images/yindao/3/foot4.png" class="swiper4_foot" alt="">
			<img src="@/static/images/yindao/3/katongnv.png" class="katongnan" :class="{ animateRen: current === 6}" alt="">
		
	</swiper-item> -->
	<!-- 第八页 -->
	<!-- <swiper-item class="swiper6">
			<img src="@/static/images/yindao/3/title3-1.png" class="swiper4_titlebg" alt="">
			<img src="@/static/images/yindao/3/title3-2.png" class="swiper4_titlebg2" alt="">
			<img src="@/static/images/yindao/3/wifi.gif" class="swiper4_wifi" alt="">
			<view class="zgydViewS"  :class="{ animateTextBg: current === 7}">
				<img src="@/static/images/yindao/3/jiaotong.png" class="gaotieText" alt="">
				<view class="sjmr_num" style="margin-top: 30rpx;">
					<view class="sjmr_num_nr">
						5G用户上行体验速率<span class="shuju">{{zbData.f_jtsn5gyhsxtysl}}Mbps</span>
					</view>
					<view class="sjmr_num_nr">
						 5G用户下行体验速率<span class="shuju">{{zbData.f_jtsn5gyhxxtysl}}Mbps</span>
					</view>
					<view class="sjmr_num_nr">
						5G无线接通率<span class="shuju">{{zbData.f_jtsn5gwxjtl}}%</span>
					</view>
				</view>
			</view>
			<view class="top3View" style="bottom: 25%;">
				<view class="top3View_topTitle" style="left: 20%;" :class="{ paihang4: current === 7 }">
					热门交通枢纽TOP3
				</view>
				<view class="top3ViewItem" style="margin-top: 0;" :class="{ paihang4: current === 7 }">
					<img src="@/static/images/yindao/2/paihang1.png" class="top3ViewItemImg" alt="">
					<span class="top3ViewItemNum">
						{{zbData.f_rmjtsnd1}}
					</span>
				</view>
				<view class="top3ViewItem" :class="{ paihang5: current === 7 }">
					<img src="@/static/images/yindao/2/paihang2.png" class="top3ViewItemImg" alt="">
					<span class="top3ViewItemNum">
						{{zbData.f_rmjtsnd2}}
					</span>
				</view>
				<view class="top3ViewItem" :class="{ paihang6: current === 7 }">
					<img src="@/static/images/yindao/2/paihang3.png" class="top3ViewItemImg" alt="">
					<span class="top3ViewItemNum">
						{{zbData.f_rmjtsnd3}}
					</span>
				</view>
			</view>
			<img src="@/static/images/yindao/3/foot5.png" class="swiper4_foot" alt="">
			<img src="@/static/images/yindao/3/katong.png" class="katong"  :class="{ animateRen: current === 7}" alt="">
	</swiper-item> -->
	<!-- 第九页 -->
	<!-- <swiper-item class="swiper5">
			<img src="@/static/images/yindao/3/title3-1.png" class="swiper4_titlebg" alt="">
			<img src="@/static/images/yindao/3/title3-2.png" class="swiper4_titlebg2" alt="">
			<img src="@/static/images/yindao/3/wifi.gif" class="swiper4_wifi" alt="">
			<view class="zgydViewS"  :class="{ animateTextBg: current === 8}">
				<img src="@/static/images/yindao/3/nongchun.png" class="gaotieText" alt="">
				<view class="sjmr_num" style="margin-top:30rpx;">
					<view class="sjmr_num_nr">
						5G用户上行体验速率<span class="shuju">{{zbData.f_nc5gyhsxtysl}}Mbps</span>
					</view>
					<view class="sjmr_num_nr">
						 5G用户下行体验速率<span class="shuju">{{zbData.f_nc5gyhxxtysl}}Mbps</span>
					</view>
					<view class="sjmr_num_nr">
						5G无线接通率<span class="shuju">{{zbData.f_nc5gwxjtl}}%</span>
					</view>
				</view>
			</view>
			<view class="top3View" style="bottom: 25%;left: 15%;">
				<view class="top3View_topTitle" :class="{ paihang4: current === 8 }">
					高人气行政村TOP3
				</view>
				<view class="top3ViewItem" style="margin-top: 0;" :class="{ paihang4: current === 8 }">
					<img src="@/static/images/yindao/2/paihang1.png" class="top3ViewItemImg" alt="">
					<span class="top3ViewItemNum">
						{{zbData.f_grqxzcd1}}
					</span>
				</view>
				<view class="top3ViewItem" :class="{ paihang5: current === 8 }">
					<img src="@/static/images/yindao/2/paihang2.png" class="top3ViewItemImg" alt="">
					<span class="top3ViewItemNum">
						{{zbData.f_grqxzcd2}}
					</span>
				</view>
				<view class="top3ViewItem" :class="{ paihang6: current === 8 }">
					<img src="@/static/images/yindao/2/paihang3.png" class="top3ViewItemImg" alt="">
					<span class="top3ViewItemNum">
						{{zbData.f_grqxzcd3}}
					</span>
				</view>
			</view>
			<img src="@/static/images/yindao/3/foot6.png" class="swiper4_foot" alt="">
			<img src="@/static/images/yindao/3/katongnan.png" class="katongnan" :class="{ animateRen: current === 8}" alt="">
			
	</swiper-item> -->
	<!-- 第十页 -->
	<swiper-item class="swiper10">
			<img src="@/static/images/yindao/4/wenzi.png" class="swiper10_titlebg" alt="">
			<img src="@/static/images/yindao/4/zgj.png" class="zgj" alt=""  :class="{ animate: current === 9 }">
	
			<view class="swiper10_list">
				<view class="swiper10_list_item" :class="{ yidong1: current === 9 }">
					<view class="swiper10_list_itemTitle">
						手机上网流量
					</view>
					<view class="swiper10sjmr_num_nr">
						日均<span class="shuju">{{ydywData.f_54llrj}}TB</span>，较日常<span class="shuju">{{ydywData.f_54lljrc > 0 ? '增长':'降低'}}{{(ydywData.f_54lljrc+ '').replace(/[-+]/g, '') + '%'}}</span>，同比<span class="shuju">增长0.7%</span>
					</view>
					<view class="swiper10sjmr_num_nr">
						峰值出现在<span class="shuju">{{ydywData.f_54fzrq}}（{{ydywData.f_54fz}}TB）</span>
					</view>
				</view>
				<view class="swiper10_list_item" :class="{ yidong2: current === 9 }">
					<view class="swiper10_list_itemTitle">
						话务量
					</view>
					<view class="swiper10sjmr_num_nr">
						日均<span class="shuju">{{ydywData.f_zhwlrj}}万ERL</span>，较日常<span class="shuju">{{ydywData.f_zhwlrjjrc > 0 ? '增长':'降低'}}{{(ydywData.f_zhwlrjjrc+ '').replace(/[-+]/g, '') + '%'}}</span>，同比<span class="shuju">降低18.7%</span>
					</view>
					<view class="swiper10sjmr_num_nr">
						峰值出现在<span class="shuju">{{ydywData.f_zhwlfzrq}}（{{ydywData.f_zhwlfz}}万ERL）</span>
					</view>
				</view>
				<view class="swiper10_list_item" :class="{ yidong3: current === 9 }">
					<view class="swiper10_list_itemTitle">
						家宽活跃用户数
					</view>
					<view class="swiper10sjmr_num_nr">
						日均<span class="shuju">{{jkschbnData.f_jkzxfzyhs}}万</span>，较日常<span class="shuju">{{jkschbnData.f_jkzxfzyhsjrc> 0 ? '增长':'降低'}}{{(jkschbnData.f_jkzxfzyhsjrc+ '').replace(/[-+]/g, '') + '%'}}</span>，同比<span class="shuju">增长6%</span> 
					</view>
					<view class="swiper10sjmr_num_nr">
						峰值出现在<span class="shuju">{{ydywData.f_jkzxfzrq}}（{{ydywData.f_jkzxfz}}万）</span>
					</view>
				</view>
				<view class="swiper10_list_item" style="border: none;" :class="{ yidong4: current === 9 }">
					<view class="swiper10_list_itemTitle">
						互联网电视播放用户数
					</view>
					<view class="swiper10sjmr_num_nr">
						日均<span class="shuju">{{CHBNjiatingData.f_hlwdsssyhrj}}万</span>，较日常<span class="shuju">{{CHBNjiatingData.f_hlwdsssyhrjjrc > 0 ? '增长':'降低'}}{{(CHBNjiatingData.f_hlwdsssyhrjjrc+ '').replace(/[-+]/g, '') + '%'}}</span>，同比<span class="shuju">降低3.2%</span>
					</view>
					<view class="swiper10sjmr_num_nr">
						峰值出现在<span class="shuju">{{ydywData.f_hlwdsssyhfzrq}}（{{ydywData.f_hlwdsssyhfz}}万）</span>
					</view>
				</view>
				<view class="swiper10_list_item" style="border: none;" :class="{ yidong5: current === 9 }">
					<view class="swiper10sjmr_num_nr">
						<span class="shuju">CCTV1</span>，仍是春节期间收视热点!
					</view>
					<view class="swiper10sjmr_num_nr">
						累计收视用户数<span class="shuju">{{CHBNjiatingData.f_rljssyhs}}万</span>
					</view>
				</view>
			</view>
	</swiper-item>
	<!-- 第十一页 -->
	<swiper-item class="swiper12">
			<view style="display: flex;">
				<img src="@/static/images/yindao/5/wenzi.png" class="swiper12_titlebg" alt="">
			</view>
			<view class="sjmr_num" style="font-weight: bold;">
					<view class="sjmr_num_nr">
						5G流量业务占比<span class="shuju2">{{CHBNgerenData.f_5gllywfld1zb}}%</span>
					</view>
					<view class="sjmr_num_nr">
						4G流量业务占比<span class="shuju2">{{CHBNgerenData.f_4gllywfld1zb}}%</span>
					</view>
					<view class="sjmr_num_nr">
						<span class="shuju2">{{CHBNgerenData.f_5gllywd1}}</span>是大家的最爱
						<img src="@/static/images/yindao/5/aixin.png" class="aixin" alt="">
					</view>
					<view class="sjmr_num_nr">
						（5G抖音占比<span class="shuju2">{{CHBNgerenData.f_5gllywd1zb}}%</span>，4G抖音占比<span class="shuju2">{{CHBNgerenData.f_4gllywd1zb}}%</span>）
					</view>
			</view>
			
			<img src="@/static/images/yindao/5/bg1.png" class="swiper12_img1" alt="">
			<img src="@/static/images/yindao/5/2025.png" class="swiper12_img2" alt="">
			<img src="@/static/images/yindao/5/shou.png" class="swiper12_img3" alt="">
			
			<img src="@/static/images/yindao/5/tx.png" class="swiper12_icon1"  :class="{ animateIcon1: current === 10 }" alt="">
			<img src="@/static/images/yindao/5/douyin.png" class="swiper12_icon2" :class="{ animateIcon2: current === 10 }" alt="">
			<img src="@/static/images/yindao/5/wx.png" class="swiper12_icon3" :class="{ animateIcon3: current === 10 }" alt="">
			<img src="@/static/images/yindao/5/hongbao.png" class="swiper12_icon4" :class="{ animateIcon4: current === 10 }" alt="">
			<img src="@/static/images/yindao/5/kuaishou.png" class="swiper12_icon5" :class="{ animateIcon5: current === 10 }" alt="">
			<img src="@/static/images/yindao/5/lihe.png" class="swiper12_icon6" :class="{ animateIcon6: current === 10 }" alt="">
			<img src="@/static/images/yindao/5/qq.png" class="swiper12_icon7" :class="{ animateIcon7: current === 10 }" alt="">
			<img src="@/static/images/yindao/5/zan.png" class="swiper12_icon8" :class="{ animateIcon8: current === 10 }" alt="">
			<img src="@/static/images/yindao/5/xx1.png" class="swiper12_icon9" alt="">
			<img src="@/static/images/yindao/5/xx2.png" class="swiper12_icon10" alt="">
			<img src="@/static/images/yindao/5/xx3.png" class="swiper12_icon11" alt="">
			
		</swiper-item>
		<!-- 第十二页 -->
		<swiper-item class="swiper13">
			<img src="@/static/images/yindao/6/wenzi.png" class="swiper1_2025" alt="">
			<view class="sjmr_num" style="margin-top: 0;">
					<view class="sjmr_num_nr" style="justify-content: flex-start;margin-left: 200rpx;">
						<img src="@/static/images/yindao/6/xingxing.png" class="xingxing" alt="">
						<span style="width: 210rpx;text-align: left;">投入保障人员</span><span class="shuju" style="color: #ffaa00;background-color: #8E4D40;padding: 2rpx 8rpx;border-radius: 8rpx;margin-left: 20rpx;">{{homeData.f_trbzry}}人次 </span>
					</view>
					<view class="sjmr_num_nr" style="justify-content: flex-start;margin-left: 200rpx;">
						<img src="@/static/images/yindao/6/xingxing.png" class="xingxing" alt="">
						<span style="width: 210rpx;text-align: left;">出动保障车辆</span><span class="shuju" style="color: #ffaa00;background-color: #8E4D40;padding: 2rpx 8rpx;border-radius: 8rpx;margin-left: 20rpx;">{{homeData.f_cdbzcl}}辆次</span>
					</view>
					<view class="sjmr_num_nr" style="justify-content: flex-start;margin-left: 200rpx;">
						<img src="@/static/images/yindao/6/xingxing.png" class="xingxing" alt="">
						<span style="width: 210rpx;text-align: left;">派发应急通信车</span><span class="shuju" style="color: #ffaa00;background-color: #8E4D40;padding: 2rpx 8rpx;border-radius: 8rpx;margin-left: 20rpx;">{{homeData.f_pfyjtxc}}辆次</span>
					</view>
			</view>
			<view class="bannerView">
				<img :src="bannerImg" class="bannerView_img" alt="" @click="previewImage(bannerImg)">
				<view class="bannerView_title" style="font-weight: bold;">
					{{bannerText}}
				</view>
			</view>
			<scroll-view class="bannerView_imgList" scroll-x="true" :scroll-left="scrollLeft" style="white-space: nowrap;">
				<view class="bannerView_imgList_item" @click="onImage(item,index)"  ref="navItem" v-for="(item,index) in bannerList" :key="index">
					<img :src="item.f_url" class="bannerView_imgList_itemImg" :style="currentIndex == index ? 'border: 6rpx solid #FF3B2F;' : '' " alt="">
				</view>
			</scroll-view>
		</swiper-item>
		<!-- 第十三页 -->
		<swiper-item class="swiper14">
			<img src="@/static/images/yindao/6/wenzi.png" class="swiper1_2025" alt="">
			<img src="@/static/images/yindao/6/ymsg.png" class="swiper1_ymsg" alt="">
			<img src="@/static/images/yindao/6/4.png" class="swiper14_ren" alt="">
			<img src="@/static/images/yindao/6/5.png" class="swiper14_che" alt="">
			<view class="xxbg" style="position: relative;" @click="goToDetails()">
				详细报告
			</view>
			<view class="pageBomtitle">
				湖北移动网络人继续陪你同行!
			</view>
			<view class="zkyb_xxbg">
				<view class="zkyb" @click="zkyb()">
					再看一遍
				</view>
				
			</view>
		</swiper-item>
    </swiper>
  </view>
  
</template>
 
 <script type="text/javascript">
	 window.addEventListener('scroll', () => {
	     if (window.scrollY > 0) {
	         document.querySelector('.uni-status-bar').style.display = 'none';
	     } else {
	         document.querySelector('.uni-status-bar').style.display = 'none';
	     }
		 
	 });
	 
	function hideBrowserUI() {
	  if (document.documentElement.requestFullscreen) {
	    document.documentElement.requestFullscreen().catch(err => {
	      if (err !== undefined) {
	        console.log(err.message);
	      }
	    });
	  } else if (document.documentElement.mozRequestFullScreen) { /* Firefox */
	    document.documentElement.mozRequestFullScreen();
	  } else if (document.documentElement.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
	    document.documentElement.webkitRequestFullscreen();
	  } else if (document.documentElement.msRequestFullscreen) { /* IE/Edge */
	    document.documentElement.msRequestFullscreen();
	  }
	}
	
 </script>
<script>
export default {
  data() {
    return {
	   currentNumber: 1, // 初始数字
	   targetNumber: 0, // 目标数字
	   duration: 1000, // 动画持续时间（毫秒）
	   current: 0,
	   autoplay: false, // 控制自动播放
	   interval: 800000,
	   timer: null, // 用于存储定时器
	   scrollLeft: 0,
	   currentIndex: 0,
	   intervalId: 0,
	   bannerList: [],
	   myxgData: {},
	   zbData: {},
	   homeData: {},
	   CHBNgerenData: {},
	   CHBNjiatingData:{},
	   ydywData: {},
	   jkschbnData:{}
    }
  },
  mounted() {
	this.$nextTick(() => {
		this.init()
		
		// 设置起始日期和起始数字
		const today = new Date();
	    this.calculateNumberByDate(this.formatDate(today))
	})
	
  },
  watch : {
	
  },
  computed: {
		bannerImg() {
			return this.bannerList.length > 0 ? this.bannerList[this.currentIndex].f_url : '' ;
		},
		bannerText() {
			return this.bannerList.length > 0 ? this.bannerList[this.currentIndex].f_content : '';
		},
		// 计算属性，用于格式化数字为四位数（如 0001, 0002...）
		formattedNumber() {
		  return this.currentNumber.toString().padStart(4, "0");
		},
  },
  methods: {
	   formatDate(date) {
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0');
		const day = String(date.getDate()).padStart(2, '0');
		return `${year}-${month}-${day}`;
	  },
	// 定义一个函数，根据输入的日期计算对应的数字
	calculateNumberByDate(targetDate) {
		// 将目标日期转换为Date对象
		const date = new Date(targetDate);
		
		// 计算目标日期与起始日期之间的天数差
		const diffTime = date.getTime() - new Date('2025-01-25').getTime();
		const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
		
		const startNumber = 1365; // 起始数字
		// 计算对应的数字
		this.targetNumber = startNumber + diffDays;
		
		// 页面加载完成后开始动画
		this.startAnimation();
	},
	previewImage(url) {
	  uni.previewImage({
		current: url, // 当前要显示的图片url
		urls: [url], // 需要预览的图片url列表数组
		success: () => {
		  console.log('图片预览成功');
		},
		fail: () => {
		  console.log('图片预览失败');
		}
	  });
	},
	init(){
		//首页
		this.getjksyData()
		//漫游相关
		this.gethxwmyxgData()
		//轮播图片
		this.getimageData()
		//重保
		this.getwyzxzbqyData()
		//获取CHBN-个人业务数据
		this.gethlwgrywData()
		// 获取CHBN-家庭业务业务数据-2
		this.gethlwjtywData()
		//移动业务
		this.getydywData()
		//家庭业务
		this.getjkschbnData()
	},
	// 获取CHBN-家庭业务业务数据-1
	async getjkschbnData() {
		let data = await this.$api.getjkschbnData();
		if (data.Code == 200) {
			this.jkschbnData = data.Data
		} else {
			uni.showToast({
				title: data.Message,
				icon: 'none',
				duration: 3000,
				mask: true,
			});
		}
	},
	// 首页
	async getjksyData() {
		let data = await this.$api.getjksyData();
		if (data.Code == 200) {
			// console.log('首页',data.Data)
			this.homeData = data.Data
		} else {
			uni.showToast({
				title: data.Message,
				icon: 'none',
				duration: 3000,
				mask: true,
			});
		}
	},
	// 漫游相关
	async gethxwmyxgData() {
		let data = await this.$api.gethxwmyxgData();
		if (data.Code == 200) {
			// console.log('漫游相关',data.Data)
			this.myxgData = data.Data
		} else {
			uni.showToast({
				title: data.Message,
				icon: 'none',
				duration: 3000,
				mask: true,
			});
		}
	},
	// 首页轮播图片
	async getimageData() {
		let data = await this.$api.getimageData();
		if (data.Code == 200) {
			// console.log('首页',data.Data)
			this.bannerList = data.Data
		} else {
			uni.showToast({
				title: data.Message,
				icon: 'none',
				duration: 3000,
				mask: true,
			});
		}
	},
	// 重保
	async getwyzxzbqyData() {
		let data = await this.$api.getwyzxzbqyData();
		if (data.Code == 200) {
			// console.log('重保',data.Data)
			this.zbData = data.Data
		} else {
			uni.showToast({
				title: data.Message,
				icon: 'none',
				duration: 5000,
				mask: true,
			});
		}
	},
	// 获取CHBN-个人业务数据 -02
	async gethlwgrywData() {
		let data = await this.$api.gethlwgrywData();
		// console.log(data, 'data')
		if (data.Code == 200) {
			this.CHBNgerenData = data.Data
		}
	},
	// 获取CHBN-家庭业务业务数据-2
	async gethlwjtywData() {
		let data = await this.$api.gethlwjtywData();
		if (data.Code == 200) {
			this.CHBNjiatingData = data.Data
		} else {
			uni.showToast({
				title: data.Message,
				icon: 'none',
				duration: 5000,
				mask: true,
			});
		}
	},
	// 移动业务
	async getydywData() {
		let data = await this.$api.getydywData();
		if (data.Code == 200) {
			this.ydywData = data.Data
		} else {
			uni.showToast({
				title: data.Message,
				icon: 'none',
				duration: 5000,
				mask: true,
			});
		}
	},
	zkyb(){
		// 立即跳转到第一页
		this.current = 0;
		// 页面加载完成后开始动画
		this.startAnimation();
	},
	goToDetails(){
		this.$router.replace({
		    path:'/pagesJK/summaryReport/index'
		});
	},
	startImageSlider() {
	    this.intervalId = setInterval(() => {
	  	this.currentIndex = (this.currentIndex + 1) % this.bannerList.length;
	  	// 计算当前导航项的偏移量
	  	const itemOffset = this.currentIndex * 38;
	  	// 计算居中位置
	  	const scrollLeft = (300 / 2) - (70 / 2) - itemOffset;
	  	this.scrollLeft = itemOffset
	   }, 3000); // 每3秒切换图片
	},
	onImage(item,index){
	  	this.currentIndex = (index) % this.bannerList.length;
	  	// 计算当前导航项的偏移量
	  	const itemOffset = index * 38;
	  	// 计算居中位置
	  	const scrollLeft = (300 / 2) - (70 / 2) - itemOffset;
	  	this.scrollLeft = itemOffset
	},
	//监听是否滚动到了最后一页
	onSwiperChange(e) {
		this.current = e.detail.current;
		//  // 清除之前的定时器
		//   if (this.timer) {
		// 	clearTimeout(this.timer);
		//   }
		//   // 重新设置定时器
		//   this.timer = setTimeout(() => {
		// 	this.autoplay = true; // 重新启用自动播放
		//   }, this.interval);
		if (this.current === 6) {
		  this.startImageSlider();
		}
	},
	startAnimation() {
        const startTime = Date.now();
        const interval = setInterval(() => {
        const elapsedTime = Date.now() - startTime;
        const progress = elapsedTime / this.duration;
  
          if (progress >= 1) {
            this.currentNumber = this.targetNumber; // 达到目标值
            clearInterval(interval); // 停止定时器
          } else {
            this.currentNumber = Math.floor(progress * this.targetNumber);
          }
        }, 16); // 16ms刷新一次，接近60fps
    }
	
  }
};
</script>
 
<style lang="less">
.container {
	  width: 100vw;
	  height: 100vh; /* 设置幻灯片的高度 */
}
 
.swiper {
	 width: 100vw;
	 height: 100vh; /* 设置幻灯片的高度 */
}
.shuju{
	font-size: 30rpx;
	color: #FF9501;
	margin:0 6rpx;
	font-weight: bold;
}
.shuju2{
	font-size: 30rpx;
	color: #FFBC01;
	margin:0 6rpx;
	font-weight: bold;
}
.shipin1{
	animation: shipin1 2s ease-in-out forwards;
}
.shipin2{
	animation: shipin2 5s ease-in-out forwards;
}
.shipin3{
	animation: shipin3 6s ease-in-out forwards;
}
.shipin4{
	animation: shipin4 6s ease-in-out forwards;
}
.yidong1{
	animation: yidong1 1.5s ease-in-out forwards;
}
.yidong2{
	animation: yidong2 3s ease-in-out forwards;
}
.yidong3{
	animation: yidong3 4.5s ease-in-out forwards;
}
.yidong4{
	animation: yidong4 6s ease-in-out forwards;
}
.yidong5{
	animation: yidong5 8s ease-in-out forwards;
}
.zuimei1{
	animation: zuimei1 2s ease-in-out forwards;
}
.zuimei2{
	animation: zuimei2 2.5s ease-in-out forwards;
}
// .zuimei3{
// 	animation: zuimei3 4.5s ease-in-out forwards;
// }
// .zuimei4{
// 	animation: zuimei4 6s ease-in-out forwards;
// }
// .zuimei5{
// 	animation: zuimei5 7s ease-in-out forwards;
// }
// .zuimei6{
// 	animation: zuimei6 8s ease-in-out forwards;
// }
// .zuimei7{
// 	animation: zuimei7 9s ease-in-out forwards;
// }
.sjmr_num{
	width: 100%;
	text-align: center;
	color: #fff;
	margin-top: 6%;
	.sjmr_num_title{
		font-weight: bold;
		font-size: 34rpx;
	}
	.sjmr_num_nr{
		font-size: 30rpx;
		margin-top: 14rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}
	.aixin{
		width: 74rpx;
	}
	.xingxing{
		width: 40rpx;
		margin-right: 10rpx;
	}
}
	.top3View{
		width: 466rpx;
		height: 283rpx;
		// background: url(@/static/images/yindao/2/kuang.png) no-repeat;
		// background-size: 466rpx;
		position: absolute;
		bottom: 14%;
		left: 20%;
		padding-top: 40rpx;
		.top3View_topTitle{
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 34rpx;
			color: #000000;
			text-align: center;
			position: absolute;
			left: 30%;
			bottom: calc(240rpx + 6%);
		}
		.top3ViewItem{
			display: flex;
			align-items: center;
			width: 466rpx;
			margin-top: 10rpx;
			.top3ViewItemImg{
				width: 86rpx;
				margin-right: 36rpx;
				margin-left: 80rpx;
			}
			.top3ViewItemName{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				margin-right: 30rpx;
			}
			.top3ViewItemNum{
				font-family: Roboto, Roboto;
				font-weight: bold;
				font-size: 28rpx;
				color: #F37A00;
			}
		}
	
		
	}
	.paihang1{
		animation: zuoyou1 4s ease-in-out forwards;
	}
	.paihang2{
		animation: zuoyou2 4.5s ease-in-out forwards;
	}
	.paihang3{
		animation: zuoyou3 5s ease-in-out forwards;
	}
	.paihang4{
		animation: zuoyou1 2s ease-in-out forwards;
	}
	.paihang5{
		animation: zuoyou2 2.5s ease-in-out forwards;
	}
	.paihang6{
		animation: zuoyou3 3s ease-in-out forwards;
	}
/deep/ .uni-swiper-dot{
	width: 16rpx;
	height: 16rpx;
	background-color: #fff;
	border: 4rpx solid #fff;
	opacity: 0.5;
}
/deep/ .uni-swiper-dot-active{
	background-color: transparent;
}
.swiper1,.swiper2,.swiper13,.swiper14{
	/* 定义幻灯片内容的样式 */
	width: 100vw;
	height: 100vh; /* 设置幻灯片的高度 */
	background: url(@/static/images/yindao/1/bg1.png) no-repeat;
	background-size: 750rpx 100%;
	position: relative;
	.swiper1_2025{
		width: 580rpx;
		margin-top: 4%;
		margin-left: 60rpx;
		display: block;
	}
	.swiper1_long{
		width: 468rpx;
		margin: 0 auto;
		position: absolute;
		bottom: 320rpx;
		left: 146rpx;
	}
	.yuanman{
		width: 100vw;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #FEEE65;
	}
	.dayView{
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #FFFFFF;
		position: absolute;
		bottom: 160rpx;
		margin-left: 210rpx;
		.dayView_bg{
			background: url(@/static/images/yindao/1/nobg.png);
			background-size: 80rpx 118rpx;
			background-position: 0 0, 10rpx 10rpx, 20rpx 20rpx; /* 设置背景图片的位置和间距 */
			width: 316rpx;
			height: 118rpx;
			line-height: 118rpx;
			letter-spacing: 44rpx; /* 设置字符间距 */
			text-indent: 22rpx;
			font-weight: bold;
			font-size: 60rpx;
			color: #fff;
			margin-right: 20rpx;
			text-align: right;
		}
	}
	.pageBomtitle{
		font-size: 34rpx;
		color: #FFFFFF;
		width: 100vw;
		color: #FFFFFF;
		text-align: center;
		position: absolute;
		bottom: 280rpx;
	}
	.zkyb_xxbg{
		margin: 0 auto;
		padding-left: 34rpx;
		position: absolute;
		bottom: 100rpx;
		left: 190rpx;
		
	}
	.zkyb,.xxbg{
		width: 308rpx;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
		background: url(@/static/images/yindao/6/6.png);
		background-size: 308rpx 96rpx;
		margin: 0 auto;
	}
	.xxbg{
		
		animation: breathe 2s ease-in-out infinite; /* 应用动画 */
	}
	

}
.swiper2,.swiper3{
	background: url(@/static/images/yindao/2/bg2.png) no-repeat;
	background-size: 750rpx 100%;
	.swiper2_titlebg{
		width: 520rpx;
		margin: 54rpx 0 0 54rpx;
		display: block;
	}
	.swiper2_titlebg2{
		width: 488rpx;
		margin: 0 0 0 68rpx;
		display: block;
	}
	
	.swiper2_dt{
		width: 608rpx;
		height: 468rpx;
		margin: 0 auto;
		margin-top: 46rpx;
		background: url(@/static/images/yindao/2/pic3.png) no-repeat;
		background-size: 608rpx ;
		position: relative;
		.biaodianView{
			position: absolute;
			top: -1130rpx;
			right: 180rpx;
			color: #ff0000;
			font-size: 20rpx
			
		}
		.swiper2_biaodian1{
			width: 40rpx;
		}
		.moveDown{
			 animation: shake 1s ease-in-out infinite; /* 持续时间调整为2秒 */
		}
		.ditu1 {
		  animation: biaodian1 1.5s ease-in-out forwards;
		}
		.ditu2 {
		  animation: biaodian2 2s ease-in-out forwards;
		}
		.ditu3 {
		  animation: biaodian3 2.5s ease-in-out forwards;
		}
		.ditu4 {
		  animation: biaodian4 1.5s ease-in-out forwards;
		}
		.ditu5 {
		  animation: biaodian5 2s ease-in-out forwards;
		}
		.ditu6 {
		  animation: biaodian6 2.5s ease-in-out forwards;
		}
		.swiper2_biaodian2{
			width: 40rpx;
		}
		.swiper2_biaodian3{
			width: 40rpx;
		}
	}
	.top3Title{
		width: 100vw;
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 34rpx;
		color: #000000;
		bottom: calc(283rpx + 12%);
		position: absolute;
	}

	}
.swiper3{
	/* 定义幻灯片内容的样式 */
	width: 100vw;
	height: 100vh;
	position: relative;
	.swiper2_hot{
		width: 118rpx;
		position: absolute;
		top: 400rpx;
		right: 70rpx;
		transform: rotate(25deg)
	}
	.swiper2_dt{
		background: url(@/static/images/yindao/2/pic2.png) no-repeat;
		background-size: 638rpx ;
		background-position: 0 70rpx;
	}
}
.swiper4,.swiper5,.swiper6{
	/* 定义幻灯片内容的样式 */
	width: 100vw;
	height: 100vh; /* 设置幻灯片的高度 */
	background: url(@/static/images/yindao/3/bg.png) no-repeat;
	background-size: 750rpx ;
	position: relative;
	.swiper4_titlebg{
		width: 400rpx;
		margin: 54rpx 0 0 54rpx;
		display: block;
	}
	.swiper4_titlebg2{
		width: 320rpx;
		margin: 0 0 0 68rpx;
		display: block;
	}
	.swiper4_wifi{
		width: 120rpx;
		position: absolute;
		top: 78rpx;
		right: 94rpx;
		// animation: swayRotate 2s ease-in-out infinite; /* 应用动画 */
	}
	.zdbz_num{
		width: 100vw;
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		margin-top: 80rpx;
		.sjmr_num_nr{
			margin-top: 10rpx;
		}
	}
	.zgydView,.zgydViewS{
		width: 520rpx;
		height: 520rpx;
		position: absolute;
		bottom: 100rpx;
		left: 16%;
		.zgydViewBg{
			width: 520rpx;
			height: 520rpx;
		}
		.zgydViewtitle{
			width: 100%;
			text-align: center;
			font-weight: bold;
			font-size: 34rpx;
			color: #FFFFFF;
			margin-top: 20rpx;
			
		}
		.gaotieText{
			height: 58rpx;
		}
		.main{
			width: 140rpx;
			height: 140rpx;
			background: url(@/static/images/yindao/3/zgydBg.png) no-repeat;
			background-size: 140rpx ;
			position: absolute;
			top: 230rpx;
			left: 220rpx;
			
		}
		.zgydView1,.zgydView2,.zgydView3,.zgydView4,.zgydView5{
			width: 160rpx;
			position: absolute;
			top: 35rpx;
			left: 240rpx;
		}
		.zgydView2{
			position: absolute;
			top: 160rpx;
			left: 440rpx;
		}
		.zgydView3{
			position: absolute;
			top: 406rpx;
			left: 384rpx;
		}
		.zgydView4{
			position: absolute;
			top: 400rpx;
			left: 90rpx;
		}
		.zgydView5{
			position: absolute;
			top: 150rpx;
			left: 50rpx;
		}
	}
	.zgydViewS{
		width: 480rpx;
		height: 480rpx;
		position: absolute;
		top: 14%;
		left: 160rpx;
		background: url(@/static/images/yindao/3/6.png) no-repeat;
		background-size: 480rpx ;
		.gaotieText{
			margin: 0 auto;
			margin-top: 120rpx;
			display: block;
		}
	}
	.swiper4_foot{
		width: 100vw;
		position: absolute;
		bottom: 0;
		left: 0;
	}
}
.swiper5,.swiper6{
	.katongnan{
		width: 188rpx;
		position: absolute;
		bottom: 44rpx;
		left: 64rpx;
	}
	/* 动画类 */
	.animateRen {
	  animation: ren1 2s ease-in-out forwards;
	}
	.text_bg{
		width: 418rpx;
		height: 418rpx;
		background: url(@/static/images/yindao/3/8.png) no-repeat;
		background-size: 418rpx;
		position: absolute;
		bottom: 118rpx;
		right: 60rpx;
		
		.text_bgNr{
			margin-top: 140rpx;
			margin-left: 20rpx;
			text-align: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #000;
			line-height: 46rpx;
		}
	}

}
.swiper6{
	.katong{
		width: 188rpx;
		position: absolute;
		bottom: 44rpx;
		right: 64rpx;
	}
	/* 动画类 */
	.animateRen {
	  animation: ren2 2s ease-in-out forwards;
	}
	.text_bg2{
		width: 418rpx;
		height: 418rpx;
		background: url(@/static/images/yindao/3/7.png) no-repeat;
		background-size: 418rpx;
		position: absolute;
		bottom: 118rpx;
		left: 42rpx;
		.text_bgNr{
			margin-top: 140rpx;
			margin-left: 20rpx;
			text-align: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #000;
			line-height: 46rpx;
		}
	}
}
.swiper10,.swiper12{
	/* 定义幻灯片内容的样式 */
	width: 100vw;
	height: 100vh; /* 设置幻灯片的高度 */
	background: url(@/static/images/yindao/4/bg.png) no-repeat;
	background-size: 750rpx 100%;
	position: relative;
	.swiper10_titlebg{
		width:342rpx;
		margin: 54rpx 0 0 54rpx;
		display: block;
	}
	.swiper10_titlebg2{
		width: 342rpx;
		margin: 0 0 0 54rpx;
		display: block;
	}
	.zgj{
		width: 268rpx;
		height: 268rpx;
		position: absolute;
		top: -268rpx;
		right: 20rpx;
	}
	/* 动画类 */
	.animate {
	  animation: moveIn 2s ease-in-out forwards;
	}
	
	.text_bg{
		width: 498rpx;
		height: 229rpx;
		// background: url(@/static/images/yindao/4/border.png) no-repeat;
		// background-size: 498rpx 100%;
		margin: 0 auto;
		margin-top: 55%;
		.text_bgNr{
			margin: 34rpx 38rpx;
			display: inline-block;
			line-height: 60rpx;
		}
	}
	.swiper10_ds{
		width: 480rpx;
		height: 416rpx;
		position: absolute;
		bottom: 5%;
		left: 126rpx;
		// background: url(@/static/images/yindao/4/dianshi2.png) no-repeat;
		// background-size: 480rpx 100%;
		.swiper10_dsNr{
			width: 326rpx;
			height: 222rpx;
			margin-top: 136rpx;
			margin-left: 40rpx;
			position: relative;
			.swiper10_chunjie{
				width: 326rpx;
				height: 222rpx;
			}
			.swiper10_cctv{
				width: 84rpx;
				position: absolute;
				top: 16rpx;
				left: 20rpx;
			}
		}
	}
	.swiper10_list{
		display: table; 
		margin-left: 52rpx;
		.swiper10_list_item{
			border-bottom: 1px dashed  #ccc;
			padding-bottom: 30rpx;
			.swiper10_list_itemTitle{
				font-family: FZZongYi-M05S, FZZongYi-M05S;
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
				line-height: 65rpx;
			}
			.swiper10sjmr_num_nr{
				font-size: 28rpx;
				color: #000;
				text-align: left;
			}
			
		}
	}
}
.swiper12{
	background: url(@/static/images/yindao/5/bg.png) no-repeat;
	background-size: 750rpx 100%;
	.swiper12_titlebg{
		height: 96rpx;
		margin: 54rpx 0 0 54rpx;
		display: block;
	}
	.swiper12_titlebg2{
		width: 204rpx;
		height: 48rpx;
		margin: 100rpx 0 0 16rpx;
		display: block;
	}
	.sjmr_num{
		width: 100vw;
		text-align: center;
		color: #fff;
		margin-top: 44rpx;
		.sjmr_num_title{
			font-weight: bold;
			font-size: 34rpx;
		}
		.sjmr_num_nr{
			font-size: 30rpx;
			margin-top: 10rpx;
		}
	}
	.swiper12_img1{
	    width: 100vw;
	    position: absolute;
	    top: 0;
	    z-index: -1;
	}
	.swiper12_img2{
		width: 695rpx;
		height: 704rpx;
		position: absolute;
		bottom: -7%;
		left: -180rpx;
		z-index: 100;
	}
	.swiper12_img3{
		width: 634rpx;
		height: 704rpx;
		position: absolute;
		bottom: -24%;
		right: -260rpx;
		z-index: 200;
	}
	.swiper12_icon1{
		width: 70rpx;
		position: absolute;
		top: 520rpx;
		left: 180rpx;
	}
	/* 动画类 */
	.animateIcon1 {
	  animation: icon1 2s ease-in-out forwards;
	}
	.swiper12_icon2{
		width: 96rpx;
		position: absolute;
		top: 490rpx;
		left: 360rpx;
	}
	/* 动画类 */
	.animateIcon2 {
	  animation: icon2 2s ease-in-out forwards;
	}
	.swiper12_icon3{
		width: 74rpx;
		position: absolute;
		top: 590rpx;
		left: 310rpx;
	}
	/* 动画类 */
	.animateIcon3 {
	  animation: icon3 2s ease-in-out forwards;
	}
	.swiper12_icon4{
		width: 118rpx;
		position: absolute;
		top: 560rpx;
		left: 480rpx;
	}
	/* 动画类 */
	.animateIcon4 {
	  animation: icon4 2s ease-in-out forwards;
	}
	.swiper12_icon5{
		width: 76rpx;
		position: absolute;
		top: 670rpx;
		left: 190rpx;
	}
	/* 动画类 */
	.animateIcon5 {
	  animation: icon5 2s ease-in-out forwards;
	}
	.swiper12_icon6{
		width: 170rpx;
		position: absolute;
		top: 740rpx;
		left: 120rpx;
	}
	/* 动画类 */
	.animateIcon6 {
	  animation: icon6 2s ease-in-out forwards;
	}
	.swiper12_icon7{
		width: 70rpx;
		position: absolute;
		top: 740rpx;
		left: 320rpx;
	}
	/* 动画类 */
	.animateIcon7 {
	  animation: icon7 2s ease-in-out forwards;
	}
	.swiper12_icon8{
		width: 124rpx;
		position: absolute;
		top: 740rpx;
		left: 500rpx;
	}
	/* 动画类 */
	.animateIcon8 {
	  animation: icon8 2s ease-in-out forwards;
	}
	.swiper12_icon9{
		width: 50rpx;
		position: absolute;
		top: 410rpx;
		left: 500rpx;
	}
	.swiper12_icon10{
		width: 56rpx;
		position: absolute;
		top: 600rpx;
		left: 100rpx;
	}
	.swiper12_icon11{
		width: 34rpx;
		position: absolute;
		top: 880rpx;
		left: 560rpx;
	}
}
.swiper13{
	.swiper13_text{
		width: 100vw;
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		margin-top: 5%;
	}
	.bannerView{
		width: 600rpx;
		height: 400rpx;
		border-radius: 13rpx;
		display: inline-block;
		background: url(@/static/images/yindao/6/1.png) no-repeat;
		background-size: 600rpx 400rpx;
		position: absolute;
		bottom: 25%;
		left: 11%;
			.bannerView_img{
				width: 550rpx;
				height: 276rpx;
				margin: 14rpx auto 0;
				display: block;
				margin-top: 20rpx;
				object-fit: cover; /* 或 contain */
			}
			.bannerView_title{
				width: 550rpx;
				margin: 0 auto;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				line-height: 30rpx;
				color: #000000;
				margin-top: 20rpx;
			}
	}
	.bannerView_imgList{
		display: flex;
		height: 184rpx;
		align-items: center;
		background: url(@/static/images/yindao/6/2.png) no-repeat;
		background-size: 750rpx 184rpx;
		position: absolute;
		bottom: 12%;
		background-color: #fff;
		.bannerView_imgList_item{
			margin-right: 20rpx;
			width: 130rpx;
			display: inline-block;
			margin-top:46rpx;
			.bannerView_imgList_itemImg{
				width: 110rpx;
				height: 80rpx;
				border: 6rpx solid #fff;
			}
		}
	}
}
.swiper14{
	height: 100vh;
	.swiper1_ymsg{
		width: 320rpx;
		margin: 10rpx auto;
		display: block;
	}
	.swiper14_ren{
		width: 206rpx;
		position: absolute;
		bottom: 310rpx;
		left: 330rpx;
		z-index: 100;
	}
	.swiper14_che{
		width: 460rpx;
		position: absolute;
		bottom: 330rpx;
		left: 120rpx;
	}
	.pageBomtitle{
		position: absolute;
		bottom: 220rpx;
	}
}
.animateTextBg{
	opacity: 0; /* 初始透明度为0 */
	animation: fadeIn 1s ease forwards; /* 使用动画 */
}
 // 动画效果 放大缩小 心跳效果
 @keyframes breathe {
     0%, 100% {
         transform: scale(0.9); /* 初始和结束时的缩放比例 */
     }
     50% {
         transform: scale(1); /* 中间时的缩放比例 */
     }
 }
 // 动画效果 图片旋转
 @keyframes rotate {
     0% {
         transform: rotate(0deg); /* 初始旋转角度 */
     }
     100% {
         transform: rotate(360deg); /* 旋转360度 */
     }
 }
 // 动画效果 图片左右晃动
 @keyframes sway {
     0%, 100% {
         transform: translateX(0); /* 初始位置 */
     }
     50% {
         transform: translateX(30rpx);
     }
 }
 // 动画效果 图片左右晃动
 @keyframes sway2 {
     0%, 100% {
         transform: translateX(20rpx); /* 初始位置 */
     }
     50% {
         transform: translateX(-20rpx); /* 向左移动10px */
     }
 }
  // 动画效果 图片45度晃动
 @keyframes swayRotate {
     0%, 100% {
         transform: rotate(0deg) translate(0, 0); /* 初始位置 */
     }
     25% {
         transform: rotate(45deg) translate(10px, 10px); /* 45度角向右下移动10px */
     }
     75% {
         transform: rotate(-45deg) translate(-10px, -10px); /* 45度角向左上移动10px */
     }
 }
  // 动画效果 中国结移动动画
 @keyframes moveIn {
     from {
         top: -268rpx;
     }
     to {
         top: -6rpx;
     }
 }
 // 动画效果 地图坐标移动
 @keyframes biaodian1 {
	 0% {
	    top: 0;
	    right: 180rpx;
	    opacity: 0;
	 }
	 60% {
	     opacity: 0.1;
	 }
	 100% {
	    top: 240rpx;
	    right: 160rpx;
	    opacity: 1;
	 }
 }
 // 动画效果 地图坐标移动
 @keyframes biaodian2 {
     0% {
         top: 0;
 		 right: 180rpx;
		 opacity: 0;
     }
	 70% {
	     opacity: 0.1;
	 }
     100% {
        top: 216rpx;
        right: 100rpx;
		opacity: 1;
     }
 }
 // 动画效果 地图坐标移动
 @keyframes biaodian3 {
      0% {
        top: 0;
        right: 210rpx;
		 opacity: 0;
     }
	 80% {
	     opacity: 0.1;
	 }
     100% {
        top: 150rpx;
        right: 115rpx;
		opacity: 1;
     }
 }
 // 动画效果 地图坐标移动
 @keyframes biaodian4 {
	0% {
	   top: 0;
	   right: 180rpx;
	   opacity: 0;
	}
	60% {
	    opacity: 0.1;
	}
	100% {
	   top: 110rpx;
	    left: 20rpx;
	   opacity: 1;
	}
 }
 // 动画效果 地图坐标移动
 @keyframes biaodian5 {
   0% {
       top: 0;
		right: 180rpx;
   		 opacity: 0;
   }
   70% {
       opacity: 0.1;
   }
   100% {
      top: 170rpx;
      right: 130rpx;
   	  opacity: 1;
   }
 }
 // 动画效果 地图坐标移动
 @keyframes biaodian6 {
   0% {
      top: 0;
      right: 210rpx;
   		 opacity: 0;
   }
   80% {
       opacity: 0.1;
   }
   100% {
      top: 240rpx;
      right: 130rpx;
   		opacity: 1;
   }
 }
 // 动画效果 排行top3渐入
 @keyframes zuoyou1 {
    0% {
        opacity: 0;
    }
	
	60% {
	    opacity: 0.1;
	}
    100% {
        opacity: 1;
    }
 }
 // 动画效果 排行top3渐入
 @keyframes zuoyou2 {
   0% {
       opacity: 0;
   }
   70% {
       opacity: 0.1;
   }
   100% {
       opacity: 1;
   }
 }
 // 动画效果 排行top3渐入
 @keyframes zuoyou3 {
   0% {
       opacity: 0;
   }
   80% {
       opacity: 0.1;
   }
   100% {
       opacity: 1;
   }
 }
 // 动画效果 移动渐入
 @keyframes yidong1 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
 }
 // 动画效果 视频渐入
 @keyframes yidong2 {
   0% {
       opacity: 0;
   }
   100% {
       opacity: 1;
   }
 }
 // 动画效果 视频渐入
 @keyframes yidong3 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
 } // 动画效果 视频渐入
 @keyframes yidong4 {
     0% {
         opacity: 0;
     }
     100% {
         opacity: 1;
     }
 } // 动画效果 视频渐入
 @keyframes yidong5 {
     0% {
         opacity: 0;
     }
     100% {
         opacity: 1;
     }
 }
 // 动画效果 视频渐入
 @keyframes shipin1 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
 }
 @keyframes shipin2 {
   0% {
       opacity: 0;
   }
   100% {
       opacity: 1;
   }
 }
 @keyframes shipin3 {
     from {
        position: absolute;
 		top: 60%;
 		left: -200%;
     }
     to {
 	    position: absolute;
 	    top: 16%;
 	    left: 33%;
     }
 }
 @keyframes shipin4 {
     from {
        position: absolute;
 		top: 60%;
 		left: -200%;
     }
     to {
 	    position: absolute;
 	    top: 21%;
 	    left: 13%;
     }
 }
 @keyframes zuimei1 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
 }
 @keyframes zuimei2 {
   0% {
       opacity: 0;
   }
   60% {
       opacity: 0.1;
   }
   100% {
       opacity: 1;
   }
 }
 @keyframes zuimei3 {
     from {
        position: absolute;
 		top: 25%;
 		left: -200%;
     }
     to {
 	    position: absolute;
 	    top: 25%;
 	    left: 22%;
     }
 }
  @keyframes zuimei4 {
     from {
        position: absolute;
 		top: 29%;
 		left: -200%;
     }
     to {
 	    position: absolute;
 	    top: 29%;
 	    left: 33%;
     }
 }
 @keyframes zuimei5 {
     from {
        position: absolute;
 		top: 33%;
 		left: -200%;
     }
     to {
 	    position: absolute;
 	    top: 33%;
 	    left: 34%;
     }
 } 
 @keyframes zuimei6 {
     from {
        position: absolute;
 		top: 37%;
 		left: -200%;
     }
     to {
 	    position: absolute;
 	    top: 37%;
 	    left: 33%;
     }
 }
 @keyframes zuimei7 {
     from {
        position: absolute;
 		top: 41%;
 		left: -200%;
     }
     to {
 	    position: absolute;
 	    top: 41%;
 	    left: 31%;
     }
 }
 // 动画效果 人走动
 @keyframes ren1 {
     from {
         left: -268rpx;
     }
     to {
         left: 64rpx;
     }
 }
 // 动画效果 人走动2
 @keyframes ren2 {
     from {
         right: -268rpx;
     }
     to {
         right: 64rpx;
     }
 }
 // 动画效果 tx
 @keyframes icon1 {
     from {
         top: 1000rpx;
         left: 400rpx;
     }
     to {
         top: 520rpx;
         left: 180rpx;
     }
 }
 @keyframes icon2 {
     from {
         top: 1000rpx;
         left: 400rpx;
     }
     to {
        top: 460rpx;
        left: 360rpx;
     }
 }
 @keyframes icon3 {
     from {
         top: 1000rpx;
         left: 400rpx;
     }
     to {
        top: 580rpx;
        left: 310rpx;
     }
 }
 @keyframes icon4 {
     from {
         top: 1000rpx;
         left: 400rpx;
     }
     to {
         top: 560rpx;
         left: 480rpx;
     }
 }
 @keyframes icon5 {
     from {
         top: 1000rpx;
         left: 400rpx;
     }
     to {
        top: 670rpx;
        left: 190rpx;
     }
 }
 @keyframes icon6 {
     from {
         top: 1000rpx;
         left: 400rpx;
     }
     to {
        top: 740rpx;
        left: 120rpx;
     }
 }
 @keyframes icon7 {
     from {
         top: 1000rpx;
         left: 400rpx;
     }
     to {
        top: 740rpx;
        left: 320rpx;
     }
 }
 @keyframes icon8 {
     from {
         top: 1000rpx;
         left: 400rpx;
     }
     to {
        top: 740rpx;
        left: 500rpx;
     }
 }
 /* 定义动画 隐藏到显示 */
 @keyframes fadeIn {
     0% {
         opacity: 0;
     }
	 70% {
	     opacity: 0.2;
	 }
     100% {
         opacity: 1;
     }
 }
 /* 定义动画 上下移动 */
 @keyframes shake {
    0%, 100% {
        transform: translateY(0);
    }
    // 25% {
    //     transform: translateY(-20rpx); /* 向上移动20px */
    // }
    75% {
        transform: translateY(10rpx); /* 向下移动20px */
    }
}
/* #ifdef H5 */
uni-page-head {
    display: none;
}
/* #endif */
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}
</style>